<template>
  <div>
    <div class="comWrap">
      <div class="singBox firstBox">
        <div class="titleH3">
          <i></i>
          <h3>公司信息</h3>
        </div>
        <ul>
          <li>
            <span>公司名称</span>
            <input type="text" name="name" placeholder="请输入公司名称" @blur="checkedName"  v-model="companyInfo.companyName">
          </li>
          <li>
            <span>法人</span>
            <input type="text" name="name" placeholder="请输入法人姓名" v-model="companyInfo.corporationName">
          </li>
          <li>
            <span>注册省市区</span>
            <input type="text" name="name" placeholder="请输入省市区" v-model="address"  @click="choseAddress(0)">
          </li>
          <li>
            <span>详细地址</span>
            <input type="text" name="name" placeholder="请输入详细地址" v-model="companyInfo.regAddrDetail">
          </li>
          <li>
            <span>邮编</span>
            <input type="text" name="name" placeholder="请输入邮编" v-model="companyInfo.zipCode">
          </li>
          <li>
            <span>传真</span>
            <input type="text" name="name" placeholder="请输入传真"  v-model="companyInfo.fax">
          </li>
          <li>
            <span>企业税号</span>
            <input type="text" name="name" placeholder="请输入企业税号" v-model="companyInfo.taxNum">
          </li>
          <li>
            <span>企业类型</span>
            <div class="magWrap fr">
              <div class="fl">
                <input class="magic-radio" type="radio" name="businessType" value="10" id="gs"
                       v-model="companyInfo.businessType">
                <label for="gs">公司</label>
              </div>
              <div class="fl">
                <input class="magic-radio" type="radio" name="businessType" value="20" id="gr"
                       v-model="companyInfo.businessType">
                <label for="gr">个人</label>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="singBox">
        <div class="titleH3">
          <i></i>
          <h3>联系人信息</h3>
        </div>
        <ul>
          <li>
            <span>联系人</span>
            <input type="text" name="name" placeholder="请输入联系人" v-model="companyInfo.regAddrCountrt">
          </li>
          <li>
            <span>联系地址</span>
            <input type="text" name="name" placeholder="请输入联系地址" v-model="companyInfo.officeAddress">
          </li>
          <li>
            <span>联系电话</span>
            <input type="text" name="name" placeholder="请输入联系电话" v-model="companyInfo.telephone">
          </li>
        </ul>
      </div>
      <div class="singBox">
        <div class="titleH3">
          <i></i>
          <h3>开票资料</h3>
        </div>
        <ul>
          <li>
            <span>开户银行</span>
            <input type="text" name="name" placeholder="请输入开户银行" v-model="companyInfo.invoiceBankName">
          </li>
          <li>
            <span>开户行账号</span>
            <input type="text" name="name" placeholder="请输入开户行账号" v-model="companyInfo.invoiceBankAccount">
          </li>
          <li>
            <span>开票抬头</span>
            <input type="text" name="name" placeholder="请输入开票抬头" v-model="companyInfo.invoiceTitle">
          </li>
          <li>
            <span>开票地址</span>
            <input type="text" name="name" placeholder="请输入开票地址" v-model="companyInfo.invoiceAddr">
          </li>
          <li>
            <span>开票电话</span>
            <input type="text" name="name" placeholder="开票电话" v-model="companyInfo.invoiceTele">
          </li>
        </ul>
      </div>
      <div class="singBox">
        <div class="titleH3">
          <i></i>
          <h3>证照信息</h3>
        </div>
        <ul>
          <li>
            <span>企业证件</span>
            <div class="magWrap fr">
              <div class="fl">
                <input class="magic-radio" type="radio" name="licenseType" v-model="companyInfo.licenseType" id="szhy"
                       value="20">
                <label for="szhy">三证合一</label>
              </div>
              <div class="fl">
                <input class="magic-radio" type="radio" name="licenseType" v-model="companyInfo.licenseType" id="qysz"
                       value="10">
                <label for="qysz">企业三证</label>
              </div>
            </div>
          </li>
          <li v-for="(item, index) in attchmentTypeList" v-if="item.use==companyInfo.licenseType || item.use==null" class="line-h-70">
            <label>{{item.txt}}</label>
            <div class="cert-image">
              <ul class="imgGroup clearfix">
                <li class="add" v-show="item.isShow" @click="getUploadPictures(item.name)">+</li>
                <li class="img" v-show="!item.isShow">
                  <img class="wc-preview-img" @click="appShowImg($event,imgTax,0)" v-show="item.name == 'tax'" :src="item.data">
                  <img class="wc-preview-img" @click="appShowImg($event,imgBusiness,0)" v-show="item.name == 'business'" :src="item.data">
                  <img class="wc-preview-img" @click="appShowImg($event,imgOrganization,0)" v-show="item.name == 'organization'" :src="item.data">
                  <img class="wc-preview-img" @click="appShowImg($event,imgThreeCode,0)" v-show="item.name == 'threeCode'" :src="item.data">
                  <img class="wc-preview-img" @click="appShowImg($event,imgRoad,0)" v-show="item.name == 'road'" :src="item.data">
                  <div class="dele" @click="removeImage(item.name)">×</div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="needsclickWrap">
        <mt-button class='btn sure' type="primary" size="large" v-show="edit" @click.native='editCompany'>编辑</mt-button>
        <mt-button class='btn sure' type="primary" size="large" v-show="add" @click.native='addCompany'>提交</mt-button>
      </div>
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="cityGroup">
          <div class="sureBtn clearfix">
            <span class="fl" @click="cancel">取消</span>
            <span class="fr" @click="sure">确定</span>
          </div>
          <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
          <!-- <p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p> -->
        </div>
      </mt-popup>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import ApiService from '@/services/API-servies'
  import {Picker, Popup} from 'mint-ui';
  import myaddress from '../../../static/address3.json'     //引入省市区数据
  import {
    Tabbar,
    TabItem,
    Cell,
    TabContainer,
    TabContainerItem,
    Button,
    InfiniteScroll,
    Indicator,
    Spinner,
    MessageBox,
  } from 'mint-ui';
  import MTabbar from '../foot/Tabbarfoot'
  import CountDown from '../public/public.vue'

  Vue.use(InfiniteScroll);
  export default {
    name: '',
    props: {},
    data() {
      return {
        popupVisible: false,
        isExistName:false,
        myAddressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: Object.keys(myaddress),  //省份数组
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
        ],
        myAddressProvince: '省',
        myAddressCity: '市',
        myAddresscounty: '区/县',
        address:"",
        attchmentTypeList: [
          {
            guid:'',
            use:"10",
            data:'',//base64
            name:"tax",
            code: '01',
            txt: '税务登记证',
            isShow:true//显示上传按钮
          },
          {
            guid:'',
            use:"10",
            data:'',//base64
            name:"business",
            code: '02',
            txt: '营业执照',
            isShow:true//显示上传按钮
          },
          {
            guid:'',
            use:"10",
            data:'',//base64
            name:"organization",
            code: '03',
            txt: '组织机构代码证',
            isShow:true//显示上传按钮
          },
          {
            guid:'',
            use:"20",
            data:'',//base64
            name:"threeCode",
            code: '04',
            txt: '三证合一',
            isShow:true//显示上传按钮
          },
          {
            guid:'',
            use:null,
            data:'',//base64
            name:"road",
            code: '05',
            txt: '运输资质',
            isShow:true//显示上传按钮
          }
        ],
        //公司信息
        companyInfo: {
          companyName: "",
          corporationName: "",
          regAddrProvince: "",
          regAddrCity: "",
          regAddrDistrict: "",
          regAddrDetail: "",
          zipCode: "",
          fax: "",
          taxNum: "",
          businessType: "",
          regAddrCountrt: "",
          telephone: "",
          invoiceBankName: "",
          invoiceBankAccount: "",
          invoiceTitle: "",
          invoiceAddr: "",
          invoiceTele: "",
          licenseType: "",//证照类型
          list: [],//证件信息
        },
        edit:false,//编辑按钮是否显示
        add:false,//新增按钮是否显示
        attchmentUploadData:null,//上传图片数据
        attchmentType:'',
        files:[],
        res:'',
        value:'0',
        imgTax:[],//图片查看集合
        imgBusiness:[],//
        imgOrganization:[],
        imgThreeCode:[],
        imgRoad:[]
      }
    },
    created() {
      window.getUploadPictures = this.getUploadPictures;
      window.setUploadPictures = this.setUploadPictures;
      this.getUpload();

    },
    mounted() {
      this.attchmentUploadData=new Map();
      this.edit=this.$route.query.ud==0?false:true;
      this.add=this.$route.query.ud==1?false:true;
      if(this.edit){
        this.loadCompanyInfo();
      };
      if(this.add){
        ApiService.session
        .setSession({
          sessionId: this.$route.query.sessionId
        })
        .then(res => {});
      }
      setTimeout(() => {
        if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
      }, 0)
    },
    watch: {
     /* //监听证件类型
      "companyInfo.licenseType": {
        handler(curVal, oldVal) {
          this.showImageList(this.companyInfo.list);
          this.attchmentUploadData=new Map();
        },
        deep: true
      }*/
    },
    computed:{
      msgF(){
        if(this.companyInfo.fax != ''){
          return Number(this.companyInfo.fax).toFixed(2);
        }
      }
    },
    methods: {
      onMyAddressChange(picker, values) {
        if (myaddress[values[0]]) {  //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
          picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
          picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
          this.myAddressProvince = values[0];
          this.myAddressCity = values[1];
          this.myAddresscounty = values[2];
        }
      },

      //记载用户公司信息
      loadCompanyInfo: function () {
        ApiService.company.detail({
          companyCode: this.$route.query.companyCode,
          type: this.$route.query.companyType
        }).then((res) => {
          if (res.meta.retCode === '0') {
            this.companyInfo = res.data;
            this.showImageList(this.companyInfo.list);
            this.address = this.companyInfo.regAddrProvince + "/" + this.companyInfo.regAddrCity + "/" + this.companyInfo.regAddrDistrict;
          }
        });
      }
      ,
      //编辑公司信息
      editCompany: function () {
       /* this.attchmentUploadData.forEach((value,key)=>{
          this.files.push(value);
        });*/

        ApiService.company.edit({
          companyCode:this.$route.query.companyCode,
          companyName:this.companyInfo.companyName,
          regAddrCountrt:this.companyInfo.regAddrCountrt,
          regAddrProvince:this.companyInfo.regAddrProvince,
          regAddrCity:this.companyInfo.regAddrCity,
          regAddrDistrict:this.companyInfo.regAddrDistrict,
          regAddrDetail:this.companyInfo.regAddrDetail,
          licenseType:this.companyInfo.licenseType,
          corporationName:this.companyInfo.corporationName,
          companyType:this.companyInfo.companyType,
          businessType:this.companyInfo.businessType,
          officeAddress:this.companyInfo.officeAddress,
          contactPerson:this.companyInfo.contactPerson,
          telephone:this.companyInfo.telephone,
          zipCode:this.companyInfo.zipCode,
          fax:this.companyInfo.fax,
          invoiceBankName:this.companyInfo.invoiceBankName,
          invoiceBankAccount:this.companyInfo.invoiceBankAccount,
          invoiceTitle:this.companyInfo.invoiceTitle,
          invoiceAddr:this.companyInfo.invoiceAddr,
          invoiceTele:this.companyInfo.invoiceTele,
          taxNum:this.companyInfo.taxNum,
          files:JSON.stringify(this.attchmentTypeList)
        }).then((res) =>{
          if(res.meta.retCode === '0'){
            MessageBox('提示', '操作成功').then(action => {
                if (action == 'confirm') {
                  this.$router.push({path: '/audit'})
                }
            });
          }
        });
      }
      ,
      //新增公司信息
      addCompany:function(){
       /* this.attchmentUploadData.forEach((value,key)=>{
          this.files.push(value);
        });*/
        ApiService.company.add({
          companyCode:this.$route.query.companyCode,
          companyName:this.companyInfo.companyName,
          regAddrCountrt:this.companyInfo.regAddrCountrt,
          regAddrProvince:this.companyInfo.regAddrProvince,
          regAddrCity:this.companyInfo.regAddrCity,
          regAddrDistrict:this.companyInfo.regAddrDistrict,
          regAddrDetail:this.companyInfo.regAddrDetail,
          licenseType:this.companyInfo.licenseType,
          corporationName:this.companyInfo.corporationName,
          companyType:this.companyInfo.companyType,
          businessType:this.companyInfo.businessType,
          officeAddress:this.companyInfo.officeAddress,
          contactPerson:this.companyInfo.contactPerson,
          telephone:this.companyInfo.telephone,
          zipCode:this.companyInfo.zipCode,
          fax:this.companyInfo.fax,
          invoiceBankName:this.companyInfo.invoiceBankName,
          invoiceBankAccount:this.companyInfo.invoiceBankAccount,
          invoiceTitle:this.companyInfo.invoiceTitle,
          invoiceAddr:this.companyInfo.invoiceAddr,
          invoiceTele:this.companyInfo.invoiceTele,
          taxNum:this.companyInfo.taxNum,
          files:JSON.stringify(this.attchmentTypeList)
        }).then((res) =>{
          if(res.meta.retCode === '0'){
            MessageBox('提示', '操作成功').then(action => {
                if (action == 'confirm') {
                  this.$router.push({path: '/audit'})
                }
            });
          }
        });
      }
      ,
      //上传图片-调用app方法
      /*uploadImage:function(name){
        this.attchmentType=name;
        app.uploadImage();
      }
      ,*/
      //app回调方法
      /*responseImage:function(){
        this.$bridge.registerhandler('JSEcho', (data, responseCallback) => {
          var data = JSON.parse(data);
          var param={"name":this.attchmentType,"attchmentInfo":data};
          this.attchmentUploadData.set(this.attchmentType,param);
        })
      }
      ,*/
      getUploadPictures(type){
        this.attchmentType = type;
        let company = '';
        if(this.add){
          company ='C00036';
        }else{
           company = this.$route.query.companyCode;
        }
       
      
      
        if(this.$isBrower.isAndroid){
          app.getUploadPictures(company,1);
        }else if(this.$isBrower.isIos){
          this.toUpload(company);
        }
        /*var res = ["http://101.132.40.254/home/ftp/temp/C00036/e7209337-b826-442f-862f-6b97acc02910.png"];*/
        this.attchmentTypeList.forEach(function(a){
          if(a.name==type){
            a.isShow=false;
            a.data=res[0];
            a.guid='';
          }
        })
        
      },
      setUploadPictures(res){
        this.res = res[0];
        let _data = res[0];
        this.eqType(_data);
        
        //var data = JSON.parse(data);
          /*var param={"name":this.attchmentType,"attchmentInfo":res};
          this.attchmentUploadData.set(this.attchmentType,param);*/
        /*  let _name = this.attchmentType;
        this.attchmentTypeList.forEach(function(a, index){
          if(a.name==_name){
            a.isShow=false;
            a.data=res[0];
            a.guid='';
          }
          if (a.name == 'tax') {
            this.imgTax.push(a.data);
          }
          if (a.name == 'business') {
            this.imgBusiness.push(a.data);
          }
          if (a.name == 'organization') {
            this.imgOrganization.push(a.data);
          }
          if (a.name == 'threeCode') {
            this.imgThreeCode.push(a.data);
          }
          if (a.name == 'road') {
            this.imgRoad.push(a.data);
          }

        })*/
      },
      toUpload(company){
            let params = company+"-"+1;
            this.$bridge.callhandler('ToUpload', params, (data) => {})
      },
      getUpload(){
          this.$bridge.registerhandler('GetUpload', (data) => {
             let _data = data[0];
              this.eqType(_data);
        })
      },
      appShowImg($event,list,index){
         let params = {
            currentIndex:index,
            pickerList:list 
          };
        if(this.$isBrower.isIos){
          this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
        } 
        if(this.$isBrower.isAndroid){
          app.showImg(params);
        }
      },
      eqType(_data){
        let _attchmentTypeList = this.attchmentTypeList;
        let _name = this.attchmentType;
        for (var i =0; i < _attchmentTypeList.length; i++) {
          let objList = _attchmentTypeList[i];
          if(objList.name == _name){
            objList.isShow = false;
            objList.data = _data;
            objList.guid = '';
          }
          if (objList.name == 'tax') {
            this.imgTax.push(objList.data);
          }
          if (objList.name == 'business') {
            this.imgBusiness.push(objList.data);
          }
          if (objList.name == 'organization') {
            this.imgOrganization.push(objList.data);
          }
          if (objList.name == 'threeCode') {
            this.imgThreeCode.push(objList.data);
          }
          if (objList.name == 'road') {
            this.imgRoad.push(objList.data);
          }
        }
      }
      ,
      //移除图片
      removeImage:function(_name){
        this.attchmentTypeList.forEach(function(a){
            if(a.name==_name){
              a.isShow=true;
              a.data='';
              a.guid='';
            }
        })
        if (_name == 'tax') {
          this.imgTax.splice(0,1);
        }
        if (_name == 'business') {
          this.imgBusiness.splice(0,1);
        }
        if (_name == 'organization') {
          this.imgOrganization.splice(0,1);
        }
        if (_name == 'threeCode') {
          this.imgThreeCode.splice(0,1);
        }
        if (_name == 'road') {
          this.imgRoad.splice(0,1);
        }
      }
      ,
      showImageList:function(list){
        var _imgTax = this.imgTax;
        var _imgBusiness = this.imgBusiness;
        var _imgOrganization = this.imgOrganization;
        var _imgThreeCode = this.imgThreeCode;
        var _imgRoad = this.imgRoad;
        let _attchmentType = this.attchmentTypeList;
          list.forEach(function(_b){
             _attchmentType.forEach(function(a){
                if(a.code == _b.attchmentType && _b.attchmentFileId != null && _b.attchmentFileId != ''){
                    a.isShow=false;
                    a.data='http://www.chuanqi56.com'+_b.attchmentFileId;
                    a.guid =_b.guid;
                    if (a.name == 'tax') {
                      _imgTax.push(a.data);
                    }else if (a.name == 'business') {
                      _imgBusiness.push(a.data);
                    }else if (a.name == 'organization') {
                      _imgOrganization.push(a.data);
                    }else if (a.name == 'threeCode') {
                      _imgThreeCode.push(a.data);
                    }else if (a.name == 'road') {
                      _imgRoad.push(a.data);
                    }
                }
                
              })
          })

       /* this.attchmentTypeList.forEach(function(a, index){
          list.forEach(function(b, index){

              if(a.code=b.attchmentType && b.attchmentFileId != null && b.attchmentFileId != ''){
                  a.isShow=false;
                  a.data=b.attchmentFileId;
                  a.guid = b.guid;
              }
          })
        })*/
      }
      ,
      choseAddress() {
        this.popupVisible = true;
      },
      sure() {
        this.address = this.myAddressProvince + "/" + this.myAddressCity + "/" + this.myAddresscounty;
        this.companyInfo.regAddrDistrict=this.myAddresscounty;
        this.companyInfo.regAddrProvince=this.myAddressProvince;
        this.companyInfo.regAddrCity=this.myAddressCity;
        this.popupVisible = false;
      },
      cancel() {
        this.popupVisible = false;
      },
      //ios 设置头部信息
      setIosTitleType(){
        let params = {
          isReturn: true,
          isSearch: false,
          isTitleSegment:false
        };
        this.$bridge.callhandler('needBarButton', params, (data) => {})
      },
      checkedName(){
        ApiService.company.isExist({
          companyName: this.companyInfo.companyName
        }).then((res) => {
          if (res.meta.retCode === '0') {
            this.isExistName = res.data;
            if(this.isExistName){
                MessageBox('提示', '公司名称已存在');
            }
          }
        });
      }
    },
    components: {
      MtTabbar: Tabbar,
      MtTabItem: TabItem,
      mtCell: Cell,
      MtTabContainer: TabContainer,
      MtTabContainerItem: TabContainerItem,
      MTabbar,
      MtButton: Button,
      CountDown,
      MtSpinner: Spinner,
      MtPopup: Popup,
      MtPicker: Picker
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/public.less";

  .comWrap {
    .singBox {
      margin-top: 40px;
      background: #fff;
      padding: 30px 0 20px 20px;
      &.firstBox{
        margin-top: 0;
      }
        ul {
          padding-left: 20px;
        li {
          padding-right: 22px;
          border-bottom: 1px solid #D8D8D8;
          font-size: 28px;
          zoom: 1;
          &:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
          }
          .magic-radio + label:before{
            top: 4px;
          }
          .magic-radio + label:after{
            top: 10px;
          }
          span {
            font-size: 28px;
            font-weight: 400;
            color: #333;
            float: left;
          }
          input {
            width: 430px;
            float: right;
            font-size: 28px;
            border: none;
            background: transparent;
            text-align: right;
            color: #666;
          }
          .fl {
            padding-left: 40px;
          }
        }
      }
    }
    .line-h-70 {
      line-height: 1.5rem;
      label{
        line-height: 160px;
        font-size: 28px;
      }
    }
    .cert-image {
      float: right;
    }
    .needsclickWrap {
      padding: 30px;
      background: #fff;
      margin-top: 20px;
    }
  .imgGroup{
    padding: 20px;
    .add{
      border: 1px solid #D0D0D0;
      font-size: 120px;
      color: #D0D0D0;
      text-align: center;
      line-height: 100px;
      font-weight: 100;
      padding-right: 0px;
    }
    .img{
      padding-right: 0px;
    }
    li{
      float: left;
      width: 120px;
      height: 120px;
      margin-left: 20px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .dele{
        position: absolute;
        background: #ccc;
        padding: 4px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 18px;
        text-align: center;
        font-weight: 200;
        color: #fff;
        top: -10px;
        right: -10px;
      }
    }
    }
  .mint-popup{
    width: 100%;
  .cityGroup{
    height: 500px;
  .sureBtn{
    background: #eee;
    font-size: 28px;
  span{
    padding: 10px 60px;
  }
  }
  }
  }
  }
</style>
